import React, {useState} from 'react';
import {View, TextInput, StyleSheet, KeyboardAvoidingView, Platform} from 'react-native';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import ChatContent from './ChatContent';
import ChatNavigation from './Navigation';
import {Button, Text} from 'native-base';

const ChatPage = () => {
  const insets = useSafeAreaInsets();
  const [messages, setMessages] = useState([
    {
      sender: 'User2',
      name: 'Jerry',
      content:
        '具体情况是：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque…',
      avatar: 'https://tenfei05.cfp.cn/creative/vcg/800/new/VCG211458140803.jpg',
    },
    {sender: 'User1', name: '马斯克', content: '稍等我看看', avatar: 'https://alifei02.cfp.cn/creative/vcg/800/new/VCG211226637716.jpg'},
    {
      sender: 'User2',
      name: 'Jerry',
      content: '好的',
      avatar: 'https://tenfei05.cfp.cn/creative/vcg/800/new/VCG211458140803.jpg',
    },
    {
      sender: 'User1',
      name: '马斯克',
      content:
        '电的发明使人们的生活从根本上发生了变化，而我们都知道，电可以分为直流电和交流电，两者到底有什么区别呢？众所周知，直流电的发明者是爱迪生，但其实这么说并不是准确，准确一点来说，爱迪生的发明主要是电的应用，而早在爱迪生之前，物理学家伏特就已经发明了可以产生直流电的原电池。原电池与我们日常所使用的电池不是一回事，原电池是一种能够把化学能转化为电能的装置，而伏特所发明的原电池也非常简单，就是盐水再加上金属片。因为一直受到爱迪生的打压，所以难以崭露头角，终于，他离开了爱迪生，开始专心研究一种新的电力系统，交流电。交流电和直流电不同，它的大小和方向可以随着时间进行周期性变化。',
      avatar: 'https://alifei02.cfp.cn/creative/vcg/800/new/VCG211226637716.jpg',
    },
    {
      sender: 'User2',
      name: 'Jerry',
      content: '谢谢',
      avatar: 'https://tenfei05.cfp.cn/creative/vcg/800/new/VCG211458140803.jpg',
    },
    {
      sender: 'User1',
      name: '马斯克',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.',
      avatar: 'https://alifei02.cfp.cn/creative/vcg/800/new/VCG211226637716.jpg',
    },
  ]);
  const [newMessage, setNewMessage] = useState('');

  const handleSend = () => {
    setMessages([...messages, {sender: 'User2', name: 'Jerry', content: newMessage, avatar: 'https://tenfei05.cfp.cn/creative/vcg/800/new/VCG211458140803.jpg'}]);
    setNewMessage('');
  };
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: 'white', paddingTop: insets.top}} edges={['left', 'right']}>
      <ChatNavigation title="回热加热器超温会诊室" />
      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.container}>
        <ChatContent messages={messages} />
        <View style={styles.inputContainer}>
          <TextInput style={styles.input} multiline={true} value={newMessage} onChangeText={setNewMessage} placeholder="Type a message" />
          <Button bg="#0084ff" onPress={handleSend}>
            <Text bold color="white">
              Send
            </Text>
          </Button>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inputContainer: {
    flexDirection: 'row',
    padding: 10,
    justifyContent: 'center',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
  },
  navBar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  navBarButton: {
    color: '#007AFF',
  },
  navBarTitle: {
    fontWeight: 'bold',
  },
});
export default ChatPage;
